<template>
	<view class="content">


		<view class="index-search-btn">
			<u-search placeholder="搜索" v-model="keyword" shape="square" :showAction="false" @search="seachList()"
				inputAlign="center"></u-search>
		</view>
		<view class="tags-list">
			<u-tag text="全部" :bgColor="productType==999?'#ff8c57':'#ebebeb'" size="mini"
				:borderColor="productType==999?'#ff8c57':'#ebebeb'" :color="productType==999?'#fff':'#333'"
				@click="checkboxClick(999)">
			</u-tag>
			<view class="tags-item" v-for="(item, index) in tagsList" :key="index">
				<u-tag :text="item.name" :name="123" :bgColor="productType==item.id?'#ff8c57':'#ebebeb'" size="mini"
					:borderColor="productType==item.id?'#ff8c57':'#ebebeb'" :color="productType==item.id?'#fff':'#333'"
					@click="checkboxClick(item.id)">
				</u-tag>
			</view>
		</view>


		<swiper :indicator-dots="false" autoplay circular style="height:200rpx;">
			<swiper-item v-for="(item, index) in hotList" :key="index" class="index-hot-swiper">
				<view class="index-hot-commodity" @click="openModel(item.id)">
					<image :src="item.product_image" mode="" class="img"></image>
					<view class="mid">
						<view class="name">
							{{item.product_title}}
						</view>
						<view class="content">
							库存：{{item.product_stock}}
						</view>
					</view>
					<view class="right">
						<view class="top">
							券后价
						</view>
						<view class="num">
							{{item.subsidy_amount}}元
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="index-type">
			排序：

			<view class="index-type-item" v-for="(item,index) in indexTypelist" :key="index" @click="changeType(index)">
				<view class="name" :class="current == index ? 'active' : ''">
					{{item.name}}
				</view>
				<view class="sort">
					<u-icon name="arrow-up" size="8" :color="item.status == 2 ? '#ff8c57' : '#333'"></u-icon>
					<u-icon name="arrow-down" size="8" :color="item.status == 1 ? '#ff8c57' : '#333'"></u-icon>
				</view>
			</view>

		</view>
		<u-list @scrolltolower="getMore" class="index-content-list" :style="{height: scroll_height}">
			<u-list-item v-for="(item, index) in list" :key="index" class="item">
				<image :src="item.product_image" mode="" class="img"></image>
				<view class="content-time">
					开始时间{{item.start_time}}
				</view>
				<view class="bottom">
					<view class="top">
						{{item.product_title}}
					</view>
					<view class="num">
						商品库存：{{item.product_stock}}
					</view>
					<view class="tags">
						<view class="tags-mid" v-show="isInvitation==1">
							<view class="tags-mid-label">
								服务费
							</view>
							<view class="tags-mid-price">
								{{item.push_subsidy_amount}}
							</view>
						</view>
						<view class="tags-right">
							<view class="tags-right-label">
								补贴
							</view>
							<view class="tags-right-price">
								{{item.subsidy_amount}}
							</view>
						</view>
					</view>
					<view class="tags-price">
						到手￥ <view>{{item.post_coupon_price}}</view>
					</view>
					<view class="btn" @click="openModel(item.id)">
						获取口令
					</view>

				</view>
			</u-list-item>
			<u-loadmore :status="loading" />
		</u-list>

		<u-modal :show="editModel" :closeOnClickOverlay="false" :showCancelButton="false" :showConfirmButton="false"
			width="550rpx">
			<view class="editContent">
				<view class="editContent-top">
					<rich-text :nodes="copyShow"></rich-text>
				</view>
				<view class="editBtn">
					<u-button type="primary" text="复制口令" @click="copyCode()"></u-button>
					<u-button type="warning" text="加入合集" @click="joinColl()"></u-button>
				</view>
				<u-icon name="close" color="#000" size="25" class="copyCloseBtn" @click="editModel = false"></u-icon>
			</view>
		</u-modal>

		<u-modal :show="noticeModel" title="公告">
			<view class="notice-content">
				<rich-text :nodes="noticeContent"></rich-text>
			</view>
		</u-modal>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scroll_height: 0,
				noticeModel: false,
				noticeContent: '',
				isInvitation: 2,
				loading: 'loadmore',
				indexTypelist: [{
					name: '系统默认',
					status: 2,
					id: 1
				}, {
					name: '近日热销',
					status: 0,
					id: 2
				}, {
					name: '补贴排序',
					status: 0,
					id: 3
				}, {
					name: '价格排序',
					status: 0,
					id: 4
				}],
				current: 0,
				upDown: 2,
				orderBy: 1,
				productType: 999,
				page: 1,
				size: 20,
				thisId: "",
				copyContent: '',
				copyShow: '',
				editModel: false,
				hotList: '',
				list: [],
				value1: 0,
				timeData: {},
				keyword: '',
				tagsList: []
			}
		},
		onLoad() {
			this.judgeCode();
		},
		methods: {
			getHeight() {
				var _this = this;
				uni.getSystemInfo({
					success: (resu) => {
						const query = uni.createSelectorQuery()
						query.select('.index-content-list').boundingClientRect()
						query.exec(function(res) {
							_this.scroll_height = resu.windowHeight - res[0].top + 'px';
						})
					},
					fail: (res) => {}
				})
			},
			showNotice() {
				this.$api.getNotice({
					source: 2
				}).then(res => {
					if (res.is_pop == '1') {
						this.noticeModel = true
						this.noticeContent = res.pop_content
					}

				})
			},
			getInfo() {
				this.$api.getUser().then(res => {
					uni.setStorageSync('userInfo', res);
					this.isInvitation = res.invitation_status;
				})
			},
			getMore() {
				this.page += 1;
				this.loading = 'loading'
				this.$api.getIndexlist({
					search_keyword: this.keyword,
					page: this.page,
					limit: this.size,
					product_cate: this.productType,
					order_by: this.orderBy,
					up_down: this.upDown
				}).then(res => {
					if (res.list.length < 20) {

						this.loading = 'nomore';
					} else {

					}
					for (let i of res.list) {
						this.list.push(i)
					}
				});
			},
			changeType(index) { //点击切换
				if (this.current != index) {
					this.indexTypelist.forEach(v => {
						v.status = 0
					})
					this.indexTypelist[index].status = 1
				}
				this.indexTypelist[index].status == 2 ? this.indexTypelist[index].status = 1 : this.indexTypelist[index]
					.status = 2 //单个切换
				this.current = index;
				this.orderBy = this.indexTypelist[index].id,
					this.upDown = this.indexTypelist[index].status,
					this.getData();
			},
			seachList() {
				this.getData();
			},
			joinColl() {
				this.$api.addColl({
					product_id: this.thisId,
					coll_type: 1
				}).then(res => {
					uni.showToast({
						title: '添加成功',
						duration: 2000
					});
					this.editModel = false;
				}).catch(err => {
					this.editModel = false;
				})
			},
			copyCode() {
				uni.setClipboardData({
					data: this.copyContent,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
						this.editModel = false;
					},
					fail: (res) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
						this.editModel = false;
					}
				});
			},
			openModel(id) {
				this.thisId = id;
				this.$api.getLink({
					product_id: id
				}).then(res => {
					this.copyShow = res.deep_link_template.replace(/\n/g, '<br>')
					this.copyContent = res.common_template
					this.editModel = true;
				})
			},
			getData() {
				this.$api.getIndexlist({
					search_keyword: this.keyword,
					page: this.page,
					limit: this.size,
					product_cate: this.productType,
					order_by: this.orderBy,
					up_down: this.upDown
				}).then(res => {
					this.list = res.list;
					this.getHeight();
				});
			},
			getHome() {
				this.$api.getHomeInfo().then(res => {
					this.hotList = res.recommend_products;
					this.tagsList = res.product_categories;
				});
			},
			checkboxClick(id) {
				this.productType = id,
					this.getData();
			},
			judgeCode() {
				let local = location.href;
				let code = this.getParam(local, "code");
				if (code) {
					this.$api.pushCode({
						code: code
					}).then(res => {
						uni.setStorageSync('token', res.token);
						if (res.is_bind_mobile == 1) {
							let href = window.location.href.replace(/\?.*$/, '');
							window.location.href = href
						} else {
							uni.reLaunch({
								url: '../login/login'
							});
						}
					})
				} else {
					this.getHome();
					this.getData();
					this.getInfo();
					this.showNotice();
				}

			},
			getParam(path, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");

				if (reg.test(path))

					return unescape(RegExp.$2.replace(/\+/g, " "));

				return "";

			}

		}
	}
</script>

<style scoped lang="scss">
	.notice-content {
		margin: 60rpx 0;
	}

	/deep/ .u-loadmore {
		width: 100%;
		flex-basis: auto;
	}

	/deep/ .uni-scroll-view-content>uni-view {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20rpx 0;
	}

	.index-type {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-bottom: 10rpx;
		font-size: 26rpx;
		gap: 20rpx;

		.index-type-item {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.active {
				color: #ff8c57
			}
		}
	}

	.index-content-list {
		background: #f9f6f6;
		padding: 20rpx;
		box-sizing: border-box;
		gap: 20rpx 0;
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;

		.item {
			background: #fff;
			width: 350rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			box-sizing: border-box;
			position: relative;

			.num {
				color: #999;
			}

			.bottom {
				height: 180rpx;
				padding: 0 10rpx;
				display: flex;
				flex-direction: column;
				font-size: 22rpx;
				box-sizing: border-box;
				justify-content: space-between;
				padding-bottom: 15rpx;
				margin-top: 15rpx;
			}

			.img {
				width: 100%;
				height: 350rpx;
			}

			.content-time {
				position: absolute;
				top: 290rpx;
				left: 0;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.2), #fff);
				width: 100%;
				color: #fff;
				font-size: 22rpx;
			}

			.tags-price {
				color: #e63d3d;
				font-weight: bold;
				align-items: center;
				display: flex;

				&>* {
					font-size: 34rpx;
				}
			}

			.top {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				/* 显示三行，超出部分使用省略号 */
				overflow: hidden;
				width: 100%;
				font-size: 24rpx;
				color: #000;
				font-weight: bold;
				flex-shrink: 0;
			}

			.btn {
				position: absolute;
				right: 10rpx;
				bottom: 15rpx;
				background: #e63d3d;
				color: #fff;
				width: 140rpx;
				border-radius: 20rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.tags {
				display: flex;
				align-items: center;
				text-align: center;
				gap: 20rpx;

				&>* {
					display: flex;
				}

				.tags-left-price {
					color: red;
				}

				.tags-mid-label {
					background: #e63d3d;
					color: #fff;
					padding: 4rpx 8rpx;
					border-radius: 10rpx;
				}

				.tags-mid-price {
					background: #e63d3d;
					color: #fff;
					padding: 4rpx 8rpx;
					border-radius: 10rpx;
				}

				.tags-right-label {
					background: #f2d451;
					color: #666;
					padding: 4rpx 8rpx;
					border-radius: 10rpx;
				}

				.tags-right-price {
					background: #fdf2cb;
					color: #666;
					padding: 4rpx 8rpx;
					border-radius: 10rpx;
				}
			}
		}
	}

	.index-search-btn {
		margin: 20rpx;
	}

	.tags-list {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding-left: 20rpx;
	}

	.index-hot-commodity {
		margin: 20rpx;
		background: #fff;
		height: 160rpx;
		gap: 25rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
		border: 1px solid #ebeef5;
		padding: 15rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.img {
			height: 130rpx;
			width: 130rpx;
			background: gray;
		}

		.mid {
			height: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			overflow: hidden;

			.content {
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}

			.name {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: bold;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.name-img {
				height: 30rpx;
				width: 30rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			display: flex;
			flex-direction: column;
			margin-right: 40rpx;
			gap: 20rpx;
			text-align: center;

			.top {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}

			.num {
				font-size: 30rpx;
				color: red;
			}
		}
	}

	.editBtn {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	/deep/ .u-modal__content {
		padding: 0 !important;
		padding-top: 40rpx;
	}

	.editContent {
		width: 100%;

		.editContent-top {
			margin: 0 50rpx;
			margin-top: 20rpx;
		}

		.editContent-mid {
			margin: 20rpx 50rpx;
		}

		.copyCloseBtn {
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>